import React from 'react';
import { View } from '@tarojs/components';
import { DatetimePicker, Tabs, ConfigProvider } from '@taroify/core';
import BottomAlert from '@/components/Alert/BottomAlert';
import i18n from 'i18n-js';
import { GStyleSheet, ThemeCompetent, DynamicColors } from '@/utils/DarkMode';

const dstyles = GStyleSheet.create({
  title: {
    textAlign: 'center',
    padding: 20,
  },
  primary: {

  },

});

interface IProps {
  isOpened: boolean;
  onCancel?: () => void;
  onConfirm?: ({ start, end }: { start: Date, end: Date }) => void;
  minDate: Date;
  maxDate: Date;
  start: Date;
  end: Date;
}

@ThemeCompetent
class TimeRangeSelectModal extends React.Component<IProps, {}> {

  constructor(props: IProps) {
    super(props);
    const { start, end } = props;
    this.state = {
      tabValue: 0,
      selStart: start,
      selEnd: end,
    }
  }

  onConfirm = () => {
    const { selStart, selEnd } = this.state;
    const { onConfirm } = this.props;
    onConfirm && onConfirm({ start: selStart, end: selEnd });
  }

  onCancel = () => {
    const { onCancel } = this.props;
    onCancel && onCancel();
  }

  setValue = (tab) => {
    this.setState({ tabValue: tab })
  }

  changeStartTime = (d) => {
    this.setState({ selStart: d });
  }

  changeEndTime = (d) => {
    this.setState({ selEnd: d });
  }

  render() {
    const styles = dstyles.style;
    const { isOpened, minDate, maxDate } = this.props;
    const { tabValue, selStart, selEnd } = this.state;

    return (
      <BottomAlert isOpened={isOpened} onCancel={this.onCancel} onConfirm={this.onConfirm}>
        <View style={styles.title}>{i18n.t('SELECT_DATE')}</View>
        <ConfigProvider theme={{ tabsActiveColor: DynamicColors.tintColor.value }}>
          <Tabs value={tabValue} onChange={this.setValue}>
            <Tabs.TabPane title={i18n.t('START_TIME')}>
              <DatetimePicker
                type='date'
                min={minDate}
                max={maxDate}
                value={selStart}
                onChange={this.changeStartTime}
              />
            </Tabs.TabPane>
            <Tabs.TabPane title={i18n.t('END_TIME')}>
              <DatetimePicker
                type='date'
                min={minDate}
                max={maxDate}
                value={selEnd}
                onChange={this.changeEndTime}
              />
            </Tabs.TabPane>
          </Tabs>
        </ConfigProvider>
      </BottomAlert>
    );
  }
}

export default TimeRangeSelectModal;
